<template>
	<view class="title-content">
		<view class="header-content">
			<view class="header-lt">
				<view class="header-top">
					<view class="top-lt">
						<image src="../../../static/product-cwr/day.png" mode=""></image>
						<text v-if="titleInfo" >{{titleInfo.trip_day}}天{{titleInfo.trip_night}}晚</text>
					</view>
					<view class="top-rt">
						西望甄选
					</view>
				</view>
				<view v-if="titleInfo" class="header-bottom">
					{{titleInfo.title}}
				</view>
			</view>
			<view class="header-rt" @click="favorite">
				<uni-icons v-if="isFavorite" type="star-filled" size="24"></uni-icons>
				<uni-icons v-else type="star" size="24"></uni-icons>
			</view>
		</view>
		<view class="container-content">
			<view class="departure">
				<image src="../../../static/product-cwr/departure.png" mode=""></image>
				出发地:
				成都
			</view>
			<view v-if="titleInfo" class="departure">
				<image src="../../../static/product-cwr/destination.png" mode=""></image>
				集合地:
				{{titleInfo.destination}}
			</view>
			<view v-if="titleInfo" class="text-content">
				{{titleInfo.description}}
			</view>
		</view>
		<view class="footer-content">
			<view v-if="titleInfo" class="content-card" >
				{{titleInfo.attraction_one[0]}}
				<text>{{titleInfo.attraction_one[1]}}</text>
			</view>
			<view v-if="titleInfo" class="content-card" >
				{{titleInfo.attraction_two[0]}}
				<text>{{titleInfo.attraction_two[1]}}</text>
			</view>
			<view v-if="titleInfo" class="content-card" >
				{{titleInfo.attraction_three[0]}}
				<text>{{titleInfo.attraction_three[1]}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref,watchEffect } from 'vue';
	import { postShopFavorite } from '@/config/API/ProductDetails.js';
	
	const props = defineProps({
		titleInfo: {
			type: Object,
			default:()=> {}
		},
		favoriteState:{
			type: Number,
			default:0
		}
	})
	const tripshopid = ref()
	const userid = ref()
	const isFavorite = ref(false)
	onLoad(()=>{
		userid.value = uni.getStorageSync('userInfo').id;

	})
	const favorite = async() =>{
		tripshopid.value = props.titleInfo?.shop_id
		const FavoriteInfo ={
			user_id:userid.value,
			shop_id:tripshopid.value
		}
		try {
			const res = await postShopFavorite(FavoriteInfo)
			console.log('res',res);
			if(res.data.trip_collect_status==1){
				isFavorite.value = true
				uni.showToast({
					title: '收藏成功',
					icon: 'none'
				})
			}else if(res.data.trip_collect_status==0){
				isFavorite.value = false
				uni.showToast({
					title: '已取消收藏',
					icon: 'none'
				})
			}else{
				uni.showToast({
					title: '操作失败请稍后再试',
					icon: 'error'
				})
			}
		} catch (error) {
			console.log('错误',error);
		}
	}
	watchEffect(() => {
		if(props.favoriteState==1){
			isFavorite.value = true
		}else{
			isFavorite.value = false
		}
		console.log('父组件传递的favorite:', props.favoriteState);
		console.log('父组件传递的titleInfo:', props.titleInfo);
	});
</script>

<style scoped>
	.title-content {
		font-family: "仓耳渔阳体 W05";
		padding: 14rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 18rpx;
		position: relative;
		bottom: 8rpx;
		box-shadow: 0rpx 4rpx 20rpx  rgba(50, 54, 67, 0.1);
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-lt {
		display: flex;
		gap: 8rpx;
		flex-direction: column;
	}

	.header-top {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}

	.top-lt {
		display: flex;
		align-items: center;
		gap: 7rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(232, 208, 149, 1);
		border-radius: 12rpx;
		background: rgba(54, 48, 48, 1);
		padding: 5rpx 12rpx;
	}

	.top-lt image {
		width: 30rpx;
		height: 30rpx;
	}

	.top-rt {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: rgba(4, 75, 173, 1);
		border: 1rpx solid rgba(4, 75, 173, 1);
		padding: 5rpx 12rpx;
		border-radius: 6rpx;
	}

	.header-bottom {
		margin-top: 4rpx;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: rgba(50, 54, 67, 1);
	}

	.header-rt {
		
	}
	.container-content{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	.departure{
		display: flex;
		gap: 6rpx;
		font-size: 26rpx;
		font-weight: 400;
		align-items: center;
	}
	.text-content{
		font-size: 21rpx;
		line-height: 29.96rpx;
		color: rgba(125, 125, 125, 1);
		text-align: left;
		vertical-align: top;
		word-break: keep-all;
		margin: 2rpx 0 10rpx 0;
	}
	.departure image{
		width: 24rpx;
		height: 24rpx;
	}
	.footer-content{
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.content-card{
		display: flex;
		gap: 10rpx;
		flex-direction: column;
		align-items: center;
		font-size: 40rpx;
		font-weight: 600;
		color: rgba(71, 61, 61, 1);
	}
	.content-card text{
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(125, 125, 125, 1);
	}
	
</style>